/**
 * 聚合
 * @description 图标、文字等entity聚合类，通过此对象添加的entity都会自动聚合
 * @class
 */
class Cluster {
    /**
     * 
     * @param {Cesium.Viewer} viewer 地图viewer对象 
     * @param {Object} opt
     * @param {Boolean} opt.enabled 是否聚合
     * @param {Number}  opt.pixelRange 聚合的像素范围
     * @param {Number}  opt.minimumClusterSize 聚合的对象最小数量
     * @param {Array}  opt.conditions 聚合的条件数组
     */
    constructor(viewer, opt) {
        this.viewer = viewer;
        this.opt = opt || {};
        const defaultOpt = {
            enabled: true,
            pixelRange: 60,
            minimumClusterSize: 3
        }

        const defaultConditions = [
            {
                number: 10, // < 10 为绿色
                color: 'rgba(0,255,0,0.3)'
            },
            {
                number: 50, // 10 - 50 为黄色色
                color: 'rgba(255,255,0,0.3)'
            },
            {
                number: Number.MAX_VALUE, // >50 红色
                color: 'rgba(255,0,0,0.3)'
            }
        ]

        this.conditions = this.opt.conditions || defaultConditions;
        this.conditions = this.conditions.sort((a, b) => {
            return a.number - b.number;
        })

        this.opt = Object.assign(defaultOpt, this.opt);
        /**
         * @property {Cesium.CustomDataSource} clusterDataSource 实体容器
         */
        this.clusterDataSource = new Cesium.CustomDataSource("clusterDataSource");
        this.clusterDataSource.clustering.enabled = this.opt.enabled;
        this.clusterDataSource.clustering.pixelRange = this.opt.pixelRange;
        this.clusterDataSource.clustering.minimumClusterSize = this.opt.minimumClusterSize;
        this.viewer.dataSources.add(this.clusterDataSource);
        this.bindCluster();
    }

    /**
     * 添加实体
     * @param {Cesium.Entity} ent 实体对象
     */
    add(ent) {
        if (ent) this.clusterDataSource.entities.add(ent);
    }
    /**
    * 移除实体
    * @param {Cesium.Entity} ent 实体对象
    */
    remove(ent) {
        if (ent) this.clusterDataSource.entities.remove(ent);
    }
    /**
     * 清空
     */
    clear() {
        this.clusterDataSource.entities.removeAll();
    }
    /**
     * 销毁
     */
    destroy() {
        this.clusterDataSource.entities.removeAll();
        this.viewer.dataSources.remove(this.clusterDataSource);
    }

    /**
     * 开启聚合
     */
    open() {
        this.clusterDataSource.enableCluster = true;
    }

    /**
     * 关闭聚合
     */
    close() {
        this.clusterDataSource.enableCluster = false;
    }
    bindCluster() {
        let that = this;
        this.clusterDataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
            let length = clusteredEntities.length;
            cluster.label.show = false;
            cluster.billboard.show = true;
            cluster.billboard.id = cluster.label.id;
            cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
            cluster.billboard.image = that.getClusterImg(length);
        }, window);
    }
    getClusterImg(length, fun) {
        let canvas = document.createElement("canvas");
        // 设置canvas的大小
        canvas.width = 64;
        canvas.height = 64;
        // 获得canva上下文环境
        let ctx = canvas.getContext("2d");

        ctx.beginPath();
        ctx.arc(32, 32, 20, 0, Math.PI * 2, true);
        ctx.closePath();
        const color = this.getColorByLength(length) || "rgba(0,255,0,0.3)";
        ctx.fillStyle = color;
        ctx.fill();

        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "16px Arial";
        ctx.fillStyle = "#ffffff"
        const text = length + "";
        ctx.fillText(text, canvas.width / 2, canvas.height / 2 + 2);

        let image = canvas.toDataURL("image/png");
        return image;
    }

    getColorByLength(number) {
        const res = this.conditions.find(cd => cd.number > number);
        return res.color;
    }
}

export default Cluster;